<template>
	<view class="goods">
		<view class="short-tabs">
			<scroll-view scroll-x="true" class="scrollView" :scroll-into-view="tabScrollInto">
				<view class="short-tab" v-for="(item,index) in shortTabs" :key="index"
					:class="active===item.id?'active':''" :id="'item_'+item.id" @click="handleTab(item.id)">
					<view class="short-tab-item">
						<text>{{item.name}}</text>
						<text>{{item.label}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="goods-content">
			<view class="short-tabs-left">
				<scroll-view scroll-y="true" class="scrollViewLeft" :scroll-into-view="tabScrollIntoLeft">
					<view class="short-tab-left" v-for="(item,index) in cates" :key="index"
						:class="activeCate===item.category_id?'active':''" :id="'item_'+item.category_id" @click="handleTabLeft(item.category_id)">
						<view class="short-tab-item-left">
							<text>{{item.category_name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="short-tabs-goods">
				<scroll-view scroll-y="true" class="scrollViewRight" @scrolltolower="getDate()">
					<view class="list" v-for="(item,index) of list" :key="index" @click="goPage(item)">
						<view class="list-left">
							<image :src="item.item_picture" mode="widthFix"></image>
							<text class="rebate">返 | {{commissionAmount(item.commission_amount)}} sg</text> 
						</view>
						<view class="list-right">
							<view class="waterfall-item-content">
								<view class="name fex2">{{item.item_title}}</view>
								<view class="seller_name" v-if="item.seller_name">
									<text class="iconfont icon-shop"></text>
									<text class="fex1">{{item.seller_name}}</text>
								</view>
								<view class="coupon-ret">
									<view class="coupon" v-if="item.coupon_price>0">
										<text>券</text>
										<text class="solid">|</text>
										<text class="coupon-price">{{item.coupon_price}}</text>
									</view>
									<!-- <view class="ret" v-if="item.item_volume">
										<text class="volume">已售{{calculation(item.item_volume)}}</text>
									</view> -->
								</view>
								
								<view class="prices">
									<view class="price">
										<text>{{item.item_final_price || '0.00'}}</text>
										<text>{{item.item_price || '0.00'}}</text>
									</view>
									<view class="go">买</view>
								</view>
							</view>
						</view>
					</view>
					<block-loading :status="status" :len="list.length"></block-loading>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {goodsCate,goods} from "@/api/duomai.js"
	export default{
		name:"index",
		data(){
			return{
				active: 1,
				tabScrollInto: "",
				shortTabs: [{
						id: 1,
						name: "淘客",
						label: "猜你喜欢"
					},
					{
						id: 2,
						name: "京东",
						label: "品牌好货"
					},
					{
						id: 5,
						name: "唯品会",
						label: "每日大牌"
					},
					{
						id: 6,
						name: "苏宁易购",
						label: "大牌电器"
					},
					// {
					// 	id: 3,
					// 	name: "拼多多",
					// 	label: "今日爆款"
					// },
					{
						id: 4,
						name: "考拉",
						label: "正品尖货"
					}
				],
				//左边数据
				activeCate:1,
				tabScrollIntoLeft:"",
				cates:[],
				status: "loading",
				list: [],
				page: 1,
			}
		},
		onLoad(option){
			this.getCates();
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:"/pages/duomai/seach/seach"
			})
		},
		methods:{
			//顶部导航
			handleTab(id) {
				if (this.active === id) return;
				this.cates = [];
				this.active = id;
				this.tabScrollInto = 'item_' + id;
				this.list = [];
				this.getCates()
			},
			//分类
			handleTabLeft(id){
				if (this.activeCate === id) return;
				this.activeCate = id;
				this.tabScrollIntoLeft = 'item_' + id;
				this.status = "loading";
				this.page = 1;
				this.list = [];
				this.getDate();
			},
			//获取分类
			async getCates(){
				let res = await goodsCate({
					custom_type: this.active,
				});
				if(res.code === 1){
					this.cates = res.data
					this.activeCate = res.data[0].category_id;
					this.getDate();
				}
			},
			async getDate(){
				let data = {
					page: this.page,
					page_size: 20,
					category_id:this.activeCate,
					custom_type: this.active,
				};
				let res = await goods(data);
				if (res.code === 1) {
					let listData = res.data.data;
					if (this.page === 1 && listData.length === 0) {
						this.status = "nodata"
						return
					}
					if(this.page===1&&listData.length > 0 && listData.length < 20){
						this.status = "nomore"
					}
					if (listData.length === 0) {
						this.status = "nomore"
						return;
					}
					if(listData.length){
						this.page++;
					}
					this.list = this.list.concat(listData);
				}
			},
			calculation(val){
				if(val>10000){
					val = Math.ceil(val/10000)+'万+'
					return val
				}
				return val
			},
			commissionAmount(val){
				val = Math.ceil(Number(val.replace(/,/g, ''))*20);
				return val;
			},
			goPage(item){
				if(item){
					item.custom_type = this.active;
					let itemStr = JSON.stringify(item)
					uni.setStorageSync("shop",itemStr)
					uni.navigateTo({
						url:'/pages/duomai/detail/detail?id='+item.item_id
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped src="./index.less">
</style>
